<template>
  <div class="community">
    <span class="title_community" :class="{ active: scroll > 100 }">社区</span>
    <van-search v-model="value" shape="round" placeholder="想去哪里,搜一搜~">
    </van-search>
    <van-button round type="primary">搜索</van-button>
    <div v-show="scroll > 100" class="background_color">
      <img :src="img[9]" alt="" />
    </div>

    <header>
      <van-notice-bar
        left-icon="volume-o"
        text="播报：【实时】全国景区优惠！快来薅羊毛！"
      />
      <span class="travel_inspiration">出行灵感</span>
      <div class="background"></div>
    </header>
    <section>
      <div class="section_top">
        <ul class="left">
          <li>
            <div class="img">
              <img :src="img[2]" alt="" />
            </div>

            <span class="text">
              <i>热门内容|</i>
              山川之旅
            </span>
          </li>
        </ul>
        <ul class="right">
          <li>
            <img :src="img[8]" alt="" />
            <span class="s1">动态广场</span>
            <span class="s2">周末去哪儿玩</span>
          </li>
          <li>
            <img :src="img[6]" alt="" />
            <span class="s3">特色民宿</span>
          </li>
        </ul>
      </div>
      <div class="middle">
        <img :src="img[7]" alt="" />
        <span>寻找旅行技术</span>
      </div>
      <div class="bottom">
        <ul>
          <li>
            <div class="img">
              <img :src="img[3]" alt="" />
              <img :src="img[4]" alt="" />
              <span>苗服旅拍攻略</span>
            </div>
            <h6>大神旅拍</h6>
          </li>
          <li>
            <div class="img">
              <img :src="img[0]" alt="" />
              <img :src="img[1]" alt="" />
              <span class="color_fff">勇攀高峰</span>
            </div>
            <h6>户外达人</h6>
          </li>
        </ul>
      </div>
    </section>
    <div class="comment">
      <h6>社区评论</h6>
      <ul>
        <li v-for="item in community" :key="item.title">
          <div class="author">
            <div class="head_portrait">
              <img :src="item.touxiang" alt="" />
            </div>
            <span class="name">{{ item.title }}</span>
            <span class="time">{{ item.content }}</span>
            <div class="attention">+关注</div>
          </div>
          <div class="img">
            <img v-for="img in item.imgArr" :key="img" :src="img" />
          </div>
          <h6 class="title">江南山水,美如画</h6>
          <div class="address">
            <div class="location">
              <van-icon name="location" />
              <span>{{ item.area }}</span>
            </div>
            <van-icon name="good-job-o" />
            <van-icon name="chat-o" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { computed, onMounted, onUnmounted } from "@vue/runtime-core";
import { useStore } from "vuex";
import { ref } from "vue";
export default {
  setup() {
    const store = useStore();
    const scroll = ref("");

    const handleScroll = function () {
      scroll.value =
        document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scroll.value);
    };
    onMounted(() => {
      store.dispatch("getimmobilization");
      store.dispatch("getcommunity");
      window.addEventListener("scroll", handleScroll);
    });

    onUnmounted(() => {
      window.removeEventListener("scroll", handleScroll);
    });
    const img = computed(() => {
      // console.log(store.state.immobilizationList);
      return store.state.immobilizationList;
    });
    const community = computed(() => {
      console.log(store.state.communityList);
      return store.state.communityList;
    });
    return {
      store,
      img,
      community,
      scroll,
    };
  },
};
</script>
<style lang="less" scoped>
.title_community {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  line-height: 12px;
  margin-left: 23px;
  margin-right: 30px;
  letter-spacing: 4px;
  margin-top: 50px;
  position: sticky;
  top: 10px;
  left: 23px;
  float: left;
  z-index: 5;
}
.active {
  color: black;
}
.van-search {
  display: inline-flex;
  width: 269px;
  height: 27px;
  border-radius: 14px;
  background-color: transparent;
  position: sticky;
  margin-top: 45px;
  top: 6px;
  z-index: 5;
  float: left;
}
.van-button {
  width: 55px;
  height: 33px;
  margin-top: -30px;
  position: sticky;
  left: 293px;
  top: 5px;
  z-index: 5;
  float: left;
  font-size: 6px;
  letter-spacing: 3px;
  padding: 0;
}
.background_color {
  width: 100%;
  height: 40px;
  background-color: #fff;
  position: sticky;
  margin-top: 38px;
  top: 0px;
  z-index: 4;
  float: left;
  margin-top: -45px;
  > img {
    width: 38px;
    height: 28px;
    display: block;
    position: relative;
    top: 2px;
    left: 20px;
  }
}

header {
  width: 375px;
  height: 213px;
  padding-top: 45px;
  background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171109%2F9a3fd1aa0836470dac4bbf7c411ca3e6.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637221395&t=8bebd38531b24640e3cc6f3b5326bdcc);
  background-size: 375px 213px;
  position: relative;

  .van-notice-bar {
    width: 356px;
    height: 32px;
    background: linear-gradient(90deg, #fff7d8 0%, #fffff0 100%);
    border-radius: 7px;
    margin: 0 auto;
    margin-top: 88px;
    z-index: 2;
    /deep/.van-notice-bar__content {
      font-size: 13px;
      font-weight: 500;
      color: #646464;
      line-height: 13px;
    }
  }
  .travel_inspiration {
    font-size: 15px;
    font-weight: 800;
    color: #111111;
    line-height: 13px;
    position: absolute;
    left: 9px;
    bottom: 10px;
    z-index: 2;
  }
  .background {
    width: 100%;
    height: 120px;
    background-image: linear-gradient(to top, #fff, transparent);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
  }
}
section {
  margin-bottom: 20px;
  .section_top {
    display: flex;
    justify-content: space-around;
    width: 100%;
    .left {
      width: 178px;
      height: 161px;
      box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
      border-radius: 7px;
      > li {
        text-align: center;
        letter-spacing: 2px;

        .img {
          width: 178px;
          height: 123px;
          border-radius: 7px;
          overflow: hidden;
          > img {
            width: 178px;
            height: 123px;
            display: block;
          }
        }
        .text {
          font-size: 14px;
          font-weight: 400;
          color: #151515;
          line-height: 12px;
          > i {
            font-size: 15px;
            font-weight: 800;
            color: #151515;
            line-height: 12px;
          }
        }
      }
    }
    .right {
      width: 172px;
      height: 161px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: transparent;
      > li {
        width: 172px;
        height: 77px;
        position: relative;
        box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
        border-radius: 7px;
        overflow: hidden;
        > img {
          width: 172px;
          height: 77px;
          display: block;
        }
        .s1 {
          font-size: 13px;
          font-weight: 800;
          color: #fff;
          letter-spacing: 2px;
          position: absolute;
          top: 9px;
          left: 9px;
        }
        .s2 {
          color: #fff;
          letter-spacing: 2px;
          font-size: 11px;
          font-weight: bold;
          color: #f7f7f7;
          line-height: 12px;
          position: absolute;
          bottom: 9px;
          right: 9px;
        }
      }
      :nth-child(2) {
        position: relative;
        .s3 {
          font-size: 15px;
          letter-spacing: 6px;
          font-weight: 400;
          color: #ffffff;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  .middle {
    width: 356px;
    height: 51px;
    border-radius: 25px;
    overflow: hidden;
    background-color: green;
    text-align: center;
    margin: 19px 10px 23px;
    position: relative;
    > img {
      width: 356px;
      height: 222px;
      display: block;
      position: relative;
      top: -130px;
    }

    > span {
      font-size: 21px;
      font-weight: bold;
      line-height: 51px;
      letter-spacing: 8px;
      color: #ffffff;
      text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .bottom {
    > ul {
      width: 100%;
      display: flex;
      justify-content: space-around;
      > li {
        width: 170px;
        height: 105px;
        background: #ffffff;
        box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
        border-radius: 7px;
        overflow: hidden;
        > .img {
          width: 100%;
          height: 72px;
          background-color: green;
          position: relative;
          text-align: center;
          > img {
            width: 50%;
            height: 72px;
            display: inline-block;
          }
          > span {
            display: inline-block;
            width: 100%;
            font-size: 14px;
            letter-spacing: 2px;
            font-weight: 800;
            color: #fff14f;
            text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
          .color_fff {
            color: #fff;
          }
        }
        > h6 {
          font-size: 14px;
          line-height: 33px;
          font-weight: 800;
          color: #000000;
          text-align: center;
          letter-spacing: 3px;
        }
      }
    }
  }
}
.comment {
  width: 100%;
  background-color: #ffffff;
  padding: 15px 10px;
  > h6 {
    font-size: 15px;
    letter-spacing: 2px;
    line-height: 20px;
    font-weight: 800;
    color: #000000;
    margin-left: 9px;
    margin-bottom: 9px;
  }
  > ul {
    > li {
      height: 360px;
      .author {
        height: 45px;
        position: relative;

        margin-bottom: 10px;
        .head_portrait {
          width: 45px;
          height: 45px;
          border-radius: 50px;
          overflow: hidden;
          background-color: green;
          position: absolute;
          top: 0;
          left: 9px;
          > img {
            width: 45px;
            height: 45px;
            display: block;
          }
        }
        .name {
          font-size: 13px;
          line-height: 28px;
          letter-spacing: 1px;
          font-weight: 400;
          color: #0e0e0e;
          position: absolute;
          top: 0;
          left: 63px;
        }
        .time {
          font-size: 7px;
          font-weight: 400;
          color: #909090;
          position: absolute;
          top: 25px;
          left: 63px;
        }
        .attention {
          width: 38px;
          height: 20px;
          background: #ffffff;
          border: 1px solid #909090;
          opacity: 0.4;
          border-radius: 7px;
          font-size: 11px;
          line-height: 20px;
          font-weight: 400;
          color: #0e0e0e;
          text-align: center;
          position: absolute;
          top: 12px;
          right: 9px;
        }
      }
      .img {
        width: 100%;
        height: 240px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 10px;
        > img {
          width: 117px;
          height: 117px;
          display: block;
        }
        :nth-child(1) {
          border-radius: 7px 0px 0px 0px;
        }
        :nth-child(3) {
          border-radius: 0px 7px 0px 0px;
        }
        :nth-child(4) {
          border-radius: 0px 0px 0px 7px;
        }
        :nth-child(6) {
          border-radius: 0px 0px 7px 0px;
        }
      }
      .title {
        font-size: 13px;
        font-weight: 500;
        color: #101010;
        margin-left: 9px;
        margin-bottom: 10px;
        letter-spacing: 2px;
      }
      .address {
        margin-left: 9px;
        position: relative;
        .location {
          width: 57px;
          height: 22px;
          background: #f9f9f9;
          border-radius: 11px;
          color: #909090;
          font-size: 12px;
          text-align: center;
          line-height: 22px;
          > .van-icon {
            font-size: 16px;
            position: relative;
            left: -2px;
          }
        }
        .van-icon-good-job-o {
          position: absolute;
          right: 62px;
          top: 0px;
          font-size: 20px;
        }
        .van-icon-chat-o {
          position: absolute;
          right: 20px;
          top: 0px;
          font-size: 20px;
        }
      }
    }
  }
}
</style>
